<template>

<div>
<div id="ajax-hook"></div>
<div class="wrap">
    <div class="wpn">
        <div class="form-data pos">
            <a href=""><img src="../../assets/img/logo.png" class="head-logo"></a>
            <div class="change-login">
                <p class="account_number on">账号登录</p>
                <!-- <p class="message">短信登录</p> -->
            </div>
            <div class="form1">
                <p class="p-input pos">
                    <label for="num">手机号/用户名/UID/邮箱</label>
                    <input type="text" id="num" maxlength="25">
                    <span class="tel-warn num-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                </p>
                <p class="p-input pos">
                    <label for="pass">请输入密码</label>
                    <input type="password" style="display:none"/>
                    <input type="password" id="pass" maxlength="25" autocomplete="new-password">
                    <span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                </p>
                <p class="p-input pos code hide">
                    <label for="veri">请输入验证码</label>
                    <input type="text" id="veri">
                    <img src="">
                    <span class="tel-warn img-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                    <!-- <a href="javascript:;">换一换</a> -->
                </p>
            </div>
            <div class="form2 hide">
                <p class="p-input pos">
                    <label for="num2">手机号</label>
                    <input type="number" id="num2">
                    <span class="tel-warn num2-err hide"><em>账号或密码错误</em><i class="icon-warn"></i></span>
                </p>
                <p class="p-input pos">
                    <label for="veri-code">输入验证码</label>
                    <input type="number" id="veri-code">
                    <a href="javascript:;" class="send">发送验证码</a>
                    <span class="time hide"><em>120</em>s</span>
                    <span class="tel-warn error hide">验证码错误</span>
                </p>
            </div>
            <div class="r-forget cl">
                <a href="javascript:void(0);"  @click="skipreg()" class="z">账号注册</a>
                <a href="javascript:void(0);"  @click="skipfind()" class="y">忘记密码</a>
            </div>
            <!-- <button class="lang-btn off log-btn" on-click="">登录</button> -->
            <el-button type="info" class="lang-btn off log-btn" @click="login()">登录</el-button>
            <div class="third-party">
                <!-- <a href="#" class="log-qq icon-qq-round"></a>
                <a href="#" class="log-qq icon-weixin"></a>
                <a href="#" class="log-qq icon-sina1"></a> -->
            </div>
            <p class="right">Powered by © 2019</p>
        </div>
    </div>
    </div>
</div>
</template>

<script src="../../../uitls/login.js" ></script>
<script src="../../../uitls/agree.js" ></script>
<script src="../../../uitls/jquery.js" ></script>


<script>
import blogHeader from "@/components/common/BlogHeader.vue";
import blogFooter from "@/components/common/BlogFooter.vue";

export default {
  name: "BlogLogin",
  // blogHeader、blogFooter组件给申明到components里面然后在template里面使用
  components: { blogHeader, blogFooter },
  data() {
    return {
      loginInfoVo: { username: "admin", password: "123" },
      responseResult: [],
      checked: true
    };
  },
  methods: {
    isEmpty(obj) {
      if (typeof obj == "undefined" || obj == null || obj == "") {
        return true;
      } else {
        return false;
      }
    },
    skipreg() {
      this.$router.push({path: '/reg'});
    },
    skipfind() {
      this.$router.push({path: '/find'});
    },
    login() {
      // axios 参数传递
      // var params = new URLSearchParams();
      // params.append("username", this.loginInfoVo.username);
      // params.append("password", this.loginInfoVo.password);
      var username = document.getElementById("num").value;
      var password = document.getElementById("pass").value;
      console.log(username+ " --- " +password);
      if (
        this.isEmpty(username) ||
        this.isEmpty(password)
      ) {
        this.open4("账号或密码不能为空！")
        return false;
      }
      this.postRequest("/login", {
        username: username,
        password: password
      })
        .then(successResponse => {
          this.responseResult = JSON.stringify(successResponse.data);
          console.log(this.responseResult);
          console.log("code--->" + successResponse.data.status);
          if (successResponse.data.status == "200") {
            console.log("页面跳转");
            localStorage.setItem("ms_username", this.loginInfoVo.username);
            this.$store.commit('login',successResponse.data.obj);
            var paths = this.$route.query.redirect;
            console.log("paths ---> "+paths);
            // this.$router.replace({ path: "/home" });
            this.$router.replace({path: paths == '/' || paths == undefined ? '/home' : paths});
          } else {
            this.open4(successResponse.data.message);
          }
        })
        .catch(failResponse => {
          this.$message.error("服务器错误");
        });
    },
    open4(msg) {
      this.$message.error(msg);
    },
    boxcol(){
      $(".icon-ok-sign").click(function(){
        verify = $(this).hasClass('boxcol') ? 0 : 1;
        $(this).toggleClass('boxcol');
        ob = $('input[name=agree]');
        ob.val(ob.val()==0?1:0);
        ob.val(ob.val() !== verify ? verify : ob.val());

        ob.val() == 0 ? $('#errormsg').removeClass('hide').addClass('show') : $('#errormsg').removeClass('show').addClass('hide');
      });
      //输入框输入时模拟placeholder效果
      var oInput = $(".form-data input");
      oInput.focus(function () {
      $(this).siblings("label").hide();
      });
      oInput.blur(function () {
      if($(this).val()==""){
        $(this).siblings("label").show();
      }
    });
      // 输入框内容变化按钮颜色发生变化
      oInput.keyup(function () {
      if($(this).val()!="jquery.js"){
        $(".log-btn").removeClass("off")
      }else{
        $(".log-btn").addClass("off")
      }
      });
    },
  },
  mounted(){
    this.boxcol();
  }
};
</script>
<style scoped>
    @import '../../assets/css/base.css';
    @import '../../assets/css/reg.css';
    @import '../../assets/css/iconfont.css';
</style>
 